<template>
    <h1>侦听器</h1>

    <p>侦听器侦听的元素是 vue 定义的元素，类似在双花括号中定义的元素，当元素内容发生变化时，可以检测到，并可以进行一些动作的处理</p>

    <p>{{ message }}</p>

    <button @click="modify_data()">修改数据</button>
</template>

<script>
export default {
    data() {
        return {
            message: "Hello"
        }
    },
    methods: {
        modify_data() {
            this.message = "World !";
        }
    },
    // 在和 data() 同级下定义 watch 关键字
    watch: {
        // 定义要监听的元素
        // 第一个参数是元素更新后的新值，第二个是旧值
        message(new_value, old_value) {
            console.log("新值：", new_value, "旧值：", old_value);
        }
    }
}
</script>